<template>
  <c-form
    ref="formRef"
    label-width="100px"
    isDialog
    :model="formData"
    :rows="formRows"
    @submit="onSubmit"
  ></c-form>
</template>

<script setup name="image-batch-update" lang="jsx">
import { ref, computed } from 'vue';

// components
import { ElMessage } from 'element-plus';

// modal,pinia
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

import { useFetch } from '@/hooks/useFetch/index.js';

// api
import { allTypeGroup, userListGroup } from '@/apis/user';
import { batchEditeImages, listGroup, listUserGroup } from '@/apis/images';

const emit = defineEmits(['refresh']);

const props = defineProps({
  // 0 普通用户 1 admin
  userType: {
    type: [String, Number],
    default: 0,
  },
});

// 分类列表
const { loading: typeLoading, data: typeGroupData } = useFetch({
  api: props.userType == 1 ? allTypeGroup : userListGroup,
});

// 分组列表
const groupParams = ref({ group_type: '' });
const {
  loading: groupLoading,
  data: groupData,
  queryData: queryListGroup,
} = useFetch({
  api: props.userType == 1 ? listGroup : listUserGroup,
  params: groupParams.value,
});

const formData = ref({
  image_type: '',
  image_group_id: '',
  image_sort: 0,
  top_status: 0,
  show_status: 0,
});

const formRows = ref([
  {
    formType: 'select',
    prop: 'image_type',
    label: '图像类型:',
    optionList: computed(() => typeGroupData.value),
    optionProps: { label: 'label', value: 'value' },
    loading: computed(() => typeLoading.value),
    onChange: (e) => {
      groupParams.value.group_type = e;
      formData.value.image_group_id = '';
      queryListGroup();
    },
  },
  {
    formType: 'select',
    prop: 'image_group_id',
    label: '图像分组:',
    optionList: computed(() => groupData.value.data),
    optionProps: { label: 'name', value: '_id' },
    loading: computed(() => groupLoading.value),
  },
  { formType: 'input-number', prop: 'image_sort', label: '分组权重:' },
  {
    formType: 'switch',
    prop: 'show_status',
    label: '显示状态:',
    inactiveValue: 1,
    activeValue: 0,
  },
  {
    formType: 'switch',
    prop: 'top_status',
    label: '顶置状态:',
    inactiveValue: 0,
    activeValue: 1,
    isIf: computed(() => props.userType),
  },
]);

// 获取传递弹窗的数据
const modalData = modalStore.getModal();
if (modalData) {
  console.log(modalData.selectionList, 'modalData');
  // formData.value._id = modalData._id;
  // formData.value.name = modalData.name;
  // formData.value.group_type = modalData.group_type;
  // formData.value.group_sort = modalData.group_sort;
  // formData.value.status = modalData.status;
  // formData.value.group_cover = modalData.group_cover;
}

const formRef = ref(null);
const onSubmit = async (values, instance, done) => {
  instance.loading = true;
  console.log(formData.value, 'formData');

  const modalData = modalStore.getModal();
  const image_ids = modalData.selectionList.map((v) => v._id);

  const groupRes = await batchEditeImages({
    image_ids,
    field_data: formData.value,
  });

  if (groupRes.code == 0) {
    ElMessage.success('操作成功');
    modalStore.closeModal('image-batch-update');
  }

  emit('refresh');

  done();
  instance.loading = false;
};
</script>

<style lang="scss" scoped></style>
